<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./base.css">
  <title>Document</title>
</head>
<style>
  html,body{
    width: 100%;
    height: 100%;
  }
  .content{
    width: 65%;
    height: 80%;
    /* background-color: pink; */
    margin:4% auto;
    border: 1px solid gold;
  }
  .content .store{
    height: 45%;
    width: 100%;
    /* background-color: white; */
    border: 1px solid gold;
  }
  .content .store .title{
    height: 10%;
    width: 100%;
    background-color: wheat;
    color: green;
    font-weight:bolder;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gold;
  }
  /* 商店商品区域 */
  .content .store .shop{
    height: 90%;
    width: 100%;
    /* background-color:  green; */
  }
   .content .store .shop ul{
    height: 100%;
    width: 100%;
    display: flex;
   }
   .content .store .shop ul li{
    width: 27%;
    height: 90%;
    /* background-color: white;   */
    margin: 1% 4%;
    border: 1px solid gold;
   }
   .content .store .shop ul li img{
    width: 100%;
    height: 100%;
    /* 实现一个过渡的效果 */
    transition: filter 0.3s ease-in-out;
   }
   /* 当鼠标悬停在img图片上时，图片的颜色会加深 */
   .content .store .shop ul li:hover img{
    filter: brightness(70%);
   }
   /* 购物车区域 */
   .content .car{
    width: 100%;
    height: 100%;
   }
   .content .car .title{
    height: 10%;
    width: 100%;
    background-color: wheat;
    color: green;
    font-weight:bolder;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gold;
  }
  .content .car .car-content{
    height: 55%;
    width: 100%;
    display: flex;
    /* background-color: palevioletred; */
  }
  .content .car .car-content .carleft{
    height: 100%;
    width: 40%;
    /* background-color: palevioletred; */
  }
  /* 购物车图片区域 */
  .content .car .car-content .carleft img{
   height: 100%;
   width: 100%;
  }
  .content .car .car-content .carright{
    height: 100%;
    width: 60%;
    /* background-color: gold; */
  }
  .content .car .car-content .carright .ttitle{
    height: 10%;
    width: 100%;
    /* background-color: gold; */
    margin-top: 1%;
    display: flex;
    /* border: 1px solid gray; */
  }
  .content .car .car-content .carright .ttitle .title-left{
     color: black;
  font-size: 24px;
    margin-left: 5%;
    /* margin-top: 1%; */
    font-weight: bolder;
  }
  .content .car .car-content .carright .ttitle .del{
   margin-left: 50%;
   font-weight:bolder;
    /* font-size: 24px; */
  }
  .del button{
    color:green;
    background-color: #e5e5e5;
    margin-top: -3%;
  }
  /* 购物车清单区域 */
  .content .car .car-content .carright .list{
    height: 90%;
    width: 100%;
    /* background-color: gold; */
  }
  .content .car .car-content .carright .list ul{
    height: 100%;
    width: 100%;
    /* background-color: gold; */
    overflow: auto; /* 横向滚动条 */
    position: relative;
  }

  .content .car .car-content .carright .list ul p{
  color: black;
  font-size: 24px;
  font-weight: bolder;
  position: absolute;
  top: 26%;
  left: 36%;
  }
  /* 添加信息区域 */
  .content .car .car-content .carright .list ul img{
    height: 98%;
    width: 100%;
    margin-top: 0.1%;
  }
  /* 购物清单区域 */
  .content .car .car-content .carright .list li{
    height: 40%;
    width: 100%;
    background-color: gainsboro;
    margin-top: 0.5%;
    display: flex;
  }
  .content .car .car-content .carright .list li .left{
    height: 100%;
    width: 30%;
  }
  .content .car .car-content .carright .list li .left img{
    width: 100%;
    height: 100%;
  }
  .content .car .car-content .carright .list li .right{
    height: 100%;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    font-weight: bolder;
    color: black;
  }
</style>
<body>
<div class="content">
  <div class="store">
    <div class="title">Store</div>
    <div class="shop">
      <ul>
        <li id="item1"><img src="./assert/phone1.jpg" alt=""></li>
        <li id="item2"><img src="./assert/phone2.jpg" alt=""></li>
        <li id="item3"><img src="./assert/phone3.jpg" alt=""></li>
      </ul>
    </div>
  </div>
  <div class="car">
    <div class="title">ShoppingCar</div>
    <div class="car-content">
      <!-- 购物车左边区 -->
    <div class="carleft" id="carleft"><img src="./assert/shoppingcar.png" alt=""></div>
    <!-- 购物车右边区 -->
    <div class="carright">
    <div class="ttitle">
      <div class="title-left">我的购物车</div>
      <div class="del"  >
        <button id="clearButton">清空购物车</button>
      </div>
    </div>
    <div class="list" id="list">
      <ul id="list-list">
        <!-- 列表区域 -->
      </ul>
    </div>
    </div>
    </div>
  </div>
</div>
</body>
<script>
window.onload = function() {
   // 声明全局变量 messageElement， imgElement作为购物车为空时的消息提示
  var messageElement;
  var imgElement;
// 获取列表元素
  var listElement = document.getElementById('list-list');
// 获取所有的 li 标签
  var liElements = document.querySelectorAll('.content .car .car-content .carright .list ul li');
 // 检查购物车是否为空
  if (liElements.length === 0) {
    // 清空列表内容
    listElement.innerHTML = '';
// 创建提示信息元素
    messageElement = document.createElement('p');
    messageElement.innerText = '购物车中尚无商品';
      // 将提示信息添加到列表中
    listElement.appendChild(messageElement);

    imgElement = document.createElement('img');
    imgElement.src = './assert/kong.jpg';
    listElement.appendChild(imgElement);
  }
 // 创建一个 img 元素
  var images = document.querySelectorAll(".shop ul li img");
  // 将图片添加到列表中
  addDragEvent(images);
// 获取商品图片

//  购物车的图片拖放区域
  var carleft = document.getElementById("carleft");

  // 记录原始商品中的内容
  var originalHTML;
  var cartItems = {};

  // 
  carleft.addEventListener("dragover", function(event) {
    event.preventDefault();
  });

  carleft.addEventListener("drop", function(event) {
    // 阻止默认行为
    event.preventDefault();
    // 获取拖取图片
    var imageId = event.dataTransfer.getData("text/plain");

    var image = document.querySelector("#" + imageId + " img");
    // 保存原来的图片
    var originalImage = document.querySelector("#" + imageId + " img");
    // 将原来的图片放回原位置，使拖走图片后还可以继续拖放
    originalHTML = originalImage.parentElement.innerHTML;
    originalImage.parentElement.innerHTML = originalHTML;

  // 记录每一张图片的叠加的数量
    var src = image.getAttribute('src');
    if (!cartItems[src]) {
      cartItems[src] = 1;
    } else {
      cartItems[src]++;
    }
// 调用更新购物车列表的方法
    updateCartList();
    
 // 移除提示信息元素
    if (messageElement && listElement.contains(messageElement)) {
      listElement.removeChild(messageElement);
      messageElement = null;
    }
 // 移除提示信息元素
    if (imgElement && listElement.contains(imgElement)) {
      listElement.removeChild(imgElement);
      imgElement = null;
    }

    // 给新添加的图片添加拖放事件
    var images = document.querySelectorAll(".shop ul li img");
    addDragEvent(images);
  });

// 给每一张图片添加拖放事件
  function addDragEvent(images) {
    for (var i = 0; i < images.length; i++) {
      images[i].addEventListener("dragstart", function(event) {
        event.dataTransfer.setData("text/plain", event.target.closest("li").id);
      });
    }
  }
  
// 更新列表区域
  function updateCartList() {
    // 列表内容置空
    listElement.innerHTML = "";
// 给列表中的每一张图片添加li
    for (var src in cartItems) {
      var li = document.createElement("li");
      // 左边图片部分
      var leftDiv = document.createElement("div");
      leftDiv.className = "left";
      var image = document.createElement("img");
      image.src = src;
      leftDiv.appendChild(image);
      li.appendChild(leftDiv);
      // 右边计数部分
      var rightDiv = document.createElement("div");
      rightDiv.className = "right";
      // 计算相同图片的数量
      rightDiv.innerHTML = '共计<span class="count">' + cartItems[src] + '</span>件';
      li.appendChild(rightDiv);

      listElement.appendChild(li);
    }
// 添加购物为空时，显示默认图片以及文字消息
    if (Object.keys(cartItems).length === 0) {
      // 文字提示区域
      messageElement = document.createElement('p');
      messageElement.innerText = '购物车中尚无商品';
      listElement.appendChild(messageElement);
      // 图片区域
      imgElement = document.createElement('img');
      imgElement.src = './assert/kong.jpg';
      listElement.appendChild(imgElement);
    }
  }
    // 清空购物车列表
  function clearShoppingCart() {
  cartItems = {};
  updateCartList();
}
   // 为按钮添加点击事件处理程序
   document.getElementById("clearButton").addEventListener("click", clearShoppingCart);
}
</script>
</html>